<template>
  <div class="home-panel">
    <div class="home-content">
      <div class="content-sides">
        <div class="content-side content-side-left">
          <div class="main-title-wrapper">
            <div class="main-subtitle">{{ title }}</div>
            <h1 class="main-title">{{ description }}</h1>
            <div class="title-description">
              <span class="description-separator"></span>
              在食品工业中
            </div>
          </div>
          
          <NextButton @click="scrollToAbout" />
        </div>
        
        <div class="content-side content-side-right">
          <div class="heading-right-content">
            <div class="heading-right-logo">
              <span class="logo-placeholder">{{ title }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import NextButton from './NextButton.vue'

defineProps<{
  title: string;
  description: string;
}>();

const scrollToAbout = () => {
  // 使用全局滚动方法
  if (window.scrollToSection) {
    window.scrollToSection('about')
  } else {
    // 备用方案：直接滚动
    const aboutElement = document.getElementById('about')
    if (aboutElement) {
      aboutElement.scrollIntoView({ behavior: 'smooth' })
    }
  }
}
</script>

<style scoped>
.home-panel {
  width: 100%;
  height: 100%;
  position: relative;
}

.home-content {
  position: relative;
  width: 100%;
  max-width: 150rem;
  margin: 0 auto;
  padding: 0 3rem;
  height: 100vh;
  display: flex;
  align-items: center;
}

.content-sides {
  width: 100%;
  max-width: 150rem;
  margin: 0 auto;
  padding: 0;
  display: flex;
  gap: 4rem;
  align-items: center;
}

.content-side {
  flex: 1;
}

.content-side-left {
  width: 40%;
  padding-right: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-title-wrapper {
  margin-bottom: 4rem;
}

.main-subtitle {
  font-size: 1.8rem;
  color: #e58707;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.main-title {
  font-size: 7.2rem;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.2;
  margin-bottom: 2rem;
}

.title-description {
  font-size: 2.4rem;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 2rem;
  color: #828c9f;
}

.description-separator {
  display: inline-block;
  width: 8.7rem;
  height: 0.2rem;
  background-color: var(--primary-color);
  
}

.content-side-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.heading-right-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heading-right-logo {
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  position: relative;
}

.heading-right-logo::before {
  content: '';
  position: absolute;
  width: 90%;
  height: 90%;
  border: 1px solid rgba(229, 135, 7, 0.3);
  border-radius: 50%;
}

.logo-placeholder {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .home-content {
    padding: 0 2rem;
  }
  
  .content-sides {
    gap: 2rem;
  }
  
  .main-title {
    font-size: 3.5rem;
  }
  
  .heading-right-logo {
    width: 250px;
    height: 250px;
  }
}

@media (max-width: 768px) {
  .screen-content {
    padding: 0 2rem;
  }
  
  .content-sides {
    flex-direction: column;
    gap: 3rem;
  }
  
  .content-side-left {
    max-width: 100%;
  }
  
  .main-title {
    font-size: 2.5rem;
  }
  
  .main-subtitle {
    font-size: 1.2rem;
  }
  
  .title-description {
    font-size: 1.3rem;
  }
  
  .heading-right-logo {
    width: 200px;
    height: 200px;
  }
  
  .logo-placeholder {
    font-size: 2rem;
  }
}
</style>